<script setup lang="ts">
import { useClipboard } from '@vueuse/core'
// import { ElMessage } from 'element-plus'
import {msg} from'@/utils/element'
import { getSvgIcons } from '@/utils/icons'

const state = reactive({
  icons:[] as any[]
})
const { copy, copied } = useClipboard()

watch(copied, (val) => {
  // console.log('copied',val);
  if (val){
    // ElMessage({ showClose: false,message:'已复制到剪切板', type: 'success', duration: 2000 })
    msg('已复制到剪切板',{showClose: false,type: 'success', duration: 2000})
  }
})

onMounted(()=>{
  state.icons= getSvgIcons()
})
</script>

<template>
  <div class="w-full h-full border border-solid border-[#d8d9d9] bg-[#fff] rounded-3 pb-10px">
    <el-scrollbar>
      <div v-for="item in state.icons" class="flex justify-center items-center m-16px">
        <el-card shadow="hover" class="flex item-center justify-around w-160px rounded-12px cursor-pointer">
          <SvgIcon :name="item" width="32" height="32"/>
          <div class="h-60px pt-26px break-word text-center text-14px text-gray-400 hover:text-[#22656d]" @click.stop="copy(item)">
            {{ 'i-fe:'+item }}
          </div>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-scrollbar__view){
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
:deep(.el-card__body){
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>